<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Form Tools - eKoders Responsive Admin Theme</title>
	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fonts.css">
	<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
	
	<!-- PAGE LEVEL PLUGINS STYLES -->
	<link rel="stylesheet" href="assets/css/plugins/duallistbox/bootstrap-duallistbox.min.css">
	<link href="assets/css/plugins/select2/select2.css" rel="stylesheet">
	<link href="assets/css/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
	<link rel="stylesheet" href="assets/css/plugins/bootstrap-wysihtml/bootstrap-wysihtml5.css">
	<link rel="stylesheet" href="assets/css/plugins/datetime/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="assets/css/plugins/bootstrap-datepicker/datepicker.css">
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<link rel="stylesheet" type="text/css" href="assets/css/plugins/gritter/jquery.gritter.css" />

    <!-- Tc core CSS -->
	<link id="qstyle" rel="stylesheet" href="assets/css/themes/style.css">
	
	
    <!-- Add custom CSS here -->

	<!-- End custom CSS here -->
	
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
	
  </head>

  <body>
	<div id="wrapper">
		<div id="main-container">		
			<!-- BEGIN TOP NAVIGATION -->
				<nav class="navbar-top" role="navigation">
					<!-- BEGIN BRAND HEADING -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".top-collapse">
							<i class="fa fa-bars"></i>
						</button>
						<div class="navbar-brand">
							<a href="index.html">
								<img src="assets/images/logo.png" alt="logo" class="img-responsive">
							</a>
						</div>
					</div>
					<!-- END BRAND HEADING -->
					<div class="nav-top">
						<!-- BEGIN RIGHT SIDE DROPDOWN BUTTONS -->
							<ul class="nav navbar-right">
								<li class="dropdown">
									<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
										<i class="fa fa-bars"></i>
									</button>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-envelope"></i> <span class="badge up badge-primary">2</span></a>
											<ul class="dropdown-menu dropdown-scroll dropdown-messages">
												<li class="dropdown-header">
													<i class="fa fa-envelope"></i> 2 New Messages
												</li>
												<li id="messageScroll">
													<ul class="list-unstyled">
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-1.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>John Smith</strong>: Hi again! I wanted to let you know that the order...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 5 minutes ago
																		</p>
																	</div>
																</div>
															</a>
														</li>
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-2.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>Roddy Austin</strong>: Thanks for the info, if you need anything...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 3:39 PM
																		</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
												</li>
												<li class="dropdown-footer">
													<a href="#">
														Read All Messages
													</a>
												</li>
											</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-bell"></i> <span class="badge up badge-success">3</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-alerts">
											<li class="dropdown-header">
												<i class="fa fa-bell"></i> 3 New Alerts
											</li>
											<li id="alertScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<div class="alert-icon bg-info pull-left">
																<i class="fa fa-download"></i>
															</div>
																Downloads <span class="badge badge-info pull-right">16</span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-success pull-left">
																<i class="fa fa-cloud-upload"></i>
															</div>
																Server #8 Rebooted <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-danger pull-left">
																<i class="fa fa-bolt"></i>
															</div>
																Server #8 Crashed <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Alerts
												</a>
											</li>
										</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-tasks"></i> <span class="badge up badge-info">7</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-tasks">
											<li class="dropdown-header">
												<i class="fa fa-tasks"></i> 10 Pending Tasks
											</li>
											<li id="taskScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<p>
																Purchase Order #439 <span class="pull-right"><strong>52%</strong></span>
															</p>
															<div class="progress progress-striped">
																	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="width: 52%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																March Content Update <span class="pull-right"><strong>14%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Client #42 Data Scrubbing <span class="pull-right"><strong>68%</strong></span>
															</p>
															<div class="progress progress-striped">
																<div class="progress-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																PHP Upgrade Server #6 <span class="pull-right"><strong>85%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Malware Scan <span class="pull-right"><strong>66%</strong></span>
															</p>
															<div class="progress progress-striped active">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width: 66%;"></div>
															</div>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Tasks
												</a>
											</li>
										</ul>
								</li>
								<!--Speech Icon-->
								<li class="dropdown">
									<a href="#" class="speech-button">
										<i class="fa fa-microphone"></i>
									</a>
								</li>
								<!--Speech Icon-->
								<li class="dropdown user-box">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<img class="img-circle" src="assets/images/user.jpg" alt=""> <span class="user-info">John Smith</span> <b class="caret"></b>
									</a>
										<ul class="dropdown-menu dropdown-user">
											<li>
												<a href="profile.html">
													<i class="fa fa-user"></i> My Profile
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-envelope"></i> My Messages
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-tasks"></i> My Tasks
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-gear"></i> Settings
												</a>
											</li>											
											<li>
												<a href="login.html">
													<i class="fa fa-power-off"></i> Logout
												</a>
											</li>
										</ul>
								</li>
								<!--Search Box-->
								<li class="dropdown nav-search-icon">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<span class="glyphicon glyphicon-search"></span>
									</a>
									<ul class="dropdown-menu dropdown-search">
										<li>
											<div class="search-box">
												<form class="" role="search">
													<input type="text" class="form-control" placeholder="Search" />
												</form>
											</div>
										</li>
									</ul>
								</li>
								<!--Search Box-->
							</ul>
						<!-- END RIGHT SIDE DROPDOWN BUTTONS -->							
						<!-- BEGIN TOP MENU -->
							<div class="collapse navbar-collapse top-collapse">
								<!-- .nav -->
								<ul class="nav navbar-left navbar-nav">
									<li><a href="index.html">Dashboard</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											Components <b class="caret"></b>
										</a>
										<ul class="dropdown-menu">
											<li><a href="elements-ui.html">Elements</a></li>
											<li><a href="button-ui.html">Buttons & Icons</a></li>
											<li><a href="portlet.html">Portlet</a></li>
											<li><a href="jquery-ui.html">jQuery UI</a></li>
										</ul>
									</li>
									<li><a href="front/index.html">FrontEnd <span class="badge badge-primary">New</span></a></li>
								</ul><!-- /.nav -->
							</div>
						<!-- END TOP MENU -->
					</div><!-- /.nav-top -->
				</nav><!-- /.navbar-top -->
				<!-- END TOP NAVIGATION -->

				
				<!-- BEGIN SIDE NAVIGATION -->				
				<nav class="navbar-side" role="navigation">
					<div class="navbar-collapse sidebar-collapse collapse">

						<!-- BEGIN SHORTCUT BUTTONS -->
						<div class="media">							
							<ul class="sidebar-shortcuts">
								<li><a class="btn"><i class="fa fa-user icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-envelope icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-th icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-gear icon-only"></i></a></li>
							</ul>	
						</div>
						<!-- END SHORTCUT BUTTONS -->	
							
						<!-- BEGIN FIND MENU ITEM INPUT -->
						<div class="media-search">	
							<input type="text" class="input-menu" id="input-items" placeholder="Find...">
						</div>						
						<!-- END FIND MENU ITEM INPUT -->
						
						<ul id="side" class="nav navbar-nav side-nav">
							<!-- BEGIN SIDE NAV MENU -->							
							<!-- Navigation category -->
							<li>
								<h4>Navigation</h4> 								
							</li>
							<!-- END Navigation category -->
							
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i> Dashboard
								</a>
							</li>
							<!-- BEGIN COMPONENTS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#components">
									<i class="fa fa-cogs"></i> Components <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="components">
										<li>
											<a href="portlet.html">
												<i class="fa fa-angle-double-right"></i> Portlets
											</a>
										</li>
										<li>
											<a href="elements-ui.html">
												<i class="fa fa-angle-double-right"></i> Elements <span class="label label-sm label-primary">New</span>
											</a>
										</li>
										<li>
											<a href="tabs_accordions-ui.html">
												<i class="fa fa-angle-double-right"></i> Tabs & Accordions
											</a>
										</li>
										<li>
											<a href="button-ui.html">
												<i class="fa fa-angle-double-right"></i> Buttons & Icons
											</a>
										</li>
										<li>
											<a href="jquery-ui.html">
												<i class="fa fa-angle-double-right"></i> JQuery UI
											</a>
										</li>
										<li>
											<a href="nestable-list.html">
												<i class="fa fa-angle-double-right"></i> Nestable Lists
											</a>
										</li>
										<li>
											<a href="calendar.html">
												<i class="fa fa-angle-double-right"></i> Calendar
											</a>
										</li>
										<!-- BEGIN THREE LEVEL MENU -->
										<li>
											<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu">
												<i class="fa fa-angle-double-right"></i> Three Level Menu <span class="fa arrow"></span>
											</a>
												<ul class="collapse nav" id="sub-menu">
													<li>
														<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item <span class="badge badge-primary">3</span></a>
													</li>
													<!-- BEGIN 4th LEVEL MENU -->
													<li>
														<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu2">
															<i class="fa fa-angle-double-right"></i> 4rth Level <span class="fa arrow"></span>
														</a>
															<ul class="collapse nav" id="sub-menu2">
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item1 </a>
																</li>
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item2</a>
																</li>
															</ul>
													</li>
													<!-- END 4th LEVEL MENU -->
												</ul>
										</li>
										<!-- ENDTHREE LEVEL MENU -->
									</ul>
							</li>
							<!-- END COMPONENTS DROPDOWN -->							
							<li>
								<a href="tables.html">
									<i class="fa fa-list"></i> Tables<span class="badge badge-primary">New</span> 
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-text-width"></i> Typography 
								</a>
							</li>
							<!-- BEGIN FORMS DROPDOWN -->
							<li  class="panel open">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#forms">
									<i class="fa fa-edit"></i> Forms <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav in" id="forms">
										<li>
											<a href="forms.html">
												<i class="fa fa-angle-double-right"></i> Form Elements 
											</a>
										</li>
										<li>
											<a class="active" href="form-tools.html">
												<i class="fa fa-angle-double-right"></i> Form Tools 
											</a>
										</li>										
										<li>
											<a href="form-wizard.html">
												<i class="fa fa-angle-double-right"></i> Wizard & Validation
											</a>
										</li>
									</ul>
							</li>
							<!-- END FORMS DROPDOWN -->

							<!-- BEGIN CHARTS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#charts">
									<i class="fa fa-bar-chart-o"></i> Charts <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="charts">
										<li>
											<a href="flot.html">
												<i class="fa fa-angle-double-right"></i> Flot Charts 
											</a>
										</li>
										<li>
											<a href="morris.html">
												<i class="fa fa-angle-double-right"></i> Morris Charts 
											</a>
										</li>
									</ul>
							</li>
							<!-- END CHARTS DROPDOWN -->
							
							<!-- Navigation category -->
							<li>
								<h4>Support</h4> 								
							</li>
							<!-- END Navigation category -->

							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#e-pages">
									<i class="fa fa-shopping-cart"></i> eCommerce <span class="fa arrow"></span>
								</a>
								<ul class="collapse nav" id="e-pages">
									<li>
										<a href="products.html">
											<i class="fa fa-angle-double-right"></i> Products Listing
										</a>
									</li>
								</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
							
							<!-- BEGIN PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#pages">
									<i class="fa fa-list"></i> Additional Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="pages">
										<li>
											<a href="profile.html">
												<i class="fa fa-angle-double-right"></i> User Profile 
											</a>
										</li>
										<li>
											<a href="inbox.html">
												<i class="fa fa-angle-double-right"></i> Inbox 
											</a>
										</li>
										<li>
											<a href="pricing.html">
												<i class="fa fa-angle-double-right"></i> Pricing Tables
											</a>
										</li>
										<li>
											<a href="invoice.html">
												<i class="fa fa-angle-double-right"></i> Invoice
											</a>
										</li>
										<li>
											<a href="timeline.html">
												<i class="fa fa-angle-double-right"></i> Timeline
											</a>
										</li>
										<li>
											<a href="login.html">
												<i class="fa fa-angle-double-right"></i> Login & Register 
											</a>
										</li>
										<li>
											<a href="faqs.html">
												<i class="fa fa-angle-double-right"></i> FAQs
											</a>
										</li>
										<li>
											<a href="blank.html">
												<i class="fa fa-angle-double-right"></i> Blank Page
											</a>
										</li>
									</ul>
							</li>
							<!-- END PAGES DROPDOWN -->
							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#m-pages">
									<i class="fa fa-tag"></i> More Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="m-pages">
										<li>
											<a href="gallery.html">
												<i class="fa fa-angle-double-right"></i> Gallery
											</a>
										</li>
										<li>
											<a href="error-404.html">
												<i class="fa fa-angle-double-right"></i> Error 404
											</a>
										</li>
										<li>
											<a href="error-500.html">
												<i class="fa fa-angle-double-right"></i> Error 505
											</a>
										</li>
									</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
						</ul><!-- /.side-nav -->

						<div class="sidebar-labels">
							<h4>Labels</h4>							
							<ul>
								<li><a href="#"><i class="fa fa-circle-o text-primary"></i> My Recent <span class="badge badge-primary">3</span></a></li>
								<li><a href="#"><i class="fa fa-circle-o text-success"></i> Background</a></li>
							</ul>
						</div>
						
						<div class="sidebar-alerts">							
							<div class="alert fade in">
								<span>Sales Report</span>
								<div class="progress progress-mini progress-striped active no-margin-bottom">
									<div class="progress-bar progress-bar-primary" style="width: 36%"></div>
								</div>
								<small>Calculating daily bias... 36%</small>
							</div>
						</div>
						
					</div><!-- /.navbar-collapse -->
				</nav><!-- /.navbar-side -->
				<!-- END SIDE NAVIGATION -->
				

				<!-- BEGIN MAIN PAGE CONTENT -->
				<div id="page-wrapper">
					<!-- BEGIN PAGE HEADING ROW -->
						<div class="row">
							<div class="col-lg-12">
								<!-- BEGIN BREADCRUMB -->
								<div class="breadcrumbs">
									<ul class="breadcrumb">
										<li>
											<a href="#">Home</a>
										</li>
										<li><a href="#">Forms</a></li>
										<li class="active">Form Tools</li>
									</ul>
									
									<div class="b-right hidden-xs">
										<ul>
											<li><a href="#" title=""><i class="fa fa-signal"></i></a></li>
											<li><a href="#" title=""><i class="fa fa-comments"></i></a></li>
											<li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="fa fa-plus"></i><span> Tasks</span></a>
												<ul class="dropdown-menu dropdown-primary dropdown-menu-right">
													<li><a href="#">Add new task</a></li>
													<li><a href="#">Statement</a></li>
													<li><a href="#">Settings</a></li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
								<!-- END BREADCRUMB -->
								
								<div class="page-header title">
								<!-- PAGE TITLE ROW -->
									<h1>Form Tools <span class="sub-title">included third party plugins</span></h1>								
								</div>
								
								<!-- /#ek-layout-button -->	
								<div class="qs-layout-menu">
									<div class="btn btn-gray qs-setting-btn" id="qs-setting-btn">
										<i class="fa fa-cog bigger-150 icon-only"></i>
									</div>
									<div class="qs-setting-box" id="qs-setting-box">
									
										<div class="hidden-xs hidden-sm">
											<span class="bigger-120">Layout Options</span>
											
											<div class="hr hr-dotted hr-8"></div>
											<label>
												<input type="checkbox" class="tc" id="fixed-navbar" />
													<span id="#fixed-navbar" class="labels"> Fixed NavBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="fixed-sidebar" />
													<span id="#fixed-sidebar" class="labels"> Fixed NavBar+SideBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="sidebar-toggle" />
													<span id="#sidebar-toggle" class="labels"> Sidebar Toggle</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="in-container" />
													<span id="#in-container" class="labels"> Inside<strong>.container</strong></span>
											</label>
										
											<div class="space-4"></div>
										</div>
										
										<span class="bigger-120">Color Options</span>
										
										<div class="hr hr-dotted hr-8"></div>
										
										<label>
											<input type="checkbox" class="tc" id="side-bar-color" />
											<span id="#side-bar-color" class="labels"> SideBar (Light)</span>
										</label>
										
										<ul>									
											<li><button class="btn" style="background-color:#d15050;" onclick="swapStyle('assets/css/themes/style.css')"></button></li>
											<li><button class="btn" style="background-color:#86618f;" onclick="swapStyle('assets/css/themes/style-1.css')"></button></li> 
											<li><button class="btn" style="background-color:#ba5d32;" onclick="swapStyle('assets/css/themes/style-2.css')"></button></li>
											<li><button class="btn" style="background-color:#488075;" onclick="swapStyle('assets/css/themes/style-3.css')"></button></li>
											<li><button class="btn" style="background-color:#4e72c2;" onclick="swapStyle('assets/css/themes/style-4.css')"></button></li>
										</ul>
										
									</div>
								</div>
								<!-- /#ek-layout-button -->			
								
							</div><!-- /.col-lg-12 -->
						</div><!-- /.row -->
					<!-- END PAGE HEADING ROW -->					
						<div class="row">
							<div class="col-lg-12">
							
								<!-- START YOUR CONTENT HERE -->
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Dual listbox</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-0"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-0" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form class="form-horizontal" role="form">
												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-top" for="duallist"> Dual listbox </label>

													<div class="col-sm-8">
														<!-- #section:plugins/input.duallist -->
														<select multiple="multiple" size="10" name="duallistbox_demo1[]" id="duallist">
															<option value="option1">Option 1</option>
															<option value="option2">Option 2</option>
															<option value="option3" selected="selected">Option 3</option>
															<option value="option4">Option 4</option>
															<option value="option5">Option 5</option>
															<option value="option6" selected="selected">Option 6</option>
															<option value="option7">Option 7</option>
															<option value="option8">Option 8</option>
															<option value="option9">Option 9</option>
															<option value="option0">Option 10</option>
														</select>

														<!-- /section:plugins/input.duallist -->
														<div class="hr hr-16 hr-dotted"></div>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>							
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Select2 Dropdowns</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-1"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-1" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form class="form-horizontal" role="form" method="post">
												<div class="form-group">
													<label class="col-sm-2 control-label">Basic Select</label>
													<div class="col-sm-4">
														<select class="form-control" id="e1">
															<option value="AL">Alabama</option>
															<option value="WY">Wyoming</option>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">with icon</label>
													<div class="col-sm-6">
														<div class="input-group">
															<span class="input-group-addon"><i class="fa fa-user"></i></span>
															<select class="form-control" id="e2">
																<option value="AL">Alabama</option>
																<option value="WY">Wyoming</option>
															</select>
														</div>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Disabled</label>
													<div class="col-sm-4">
														<select class="form-control" id="e3" disabled>
															<option value="AL">Alabama</option>
															<option value="WY">Wyoming</option>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Multi-Value Select</label>
													<div class="col-sm-5">
														<select class="form-control" id="e4" multiple>
															<optgroup label="Colors">
																<option value="RD">Red</option>
																<option value="OR">Orange</option>
																<option value="GR">green</option>
																<option value="BL">blue</option>
																<option value="YL">Yellow</option>
															</optgroup>
															<optgroup label="City">
																<option value="JA">Jaipur</option>
																<option value="DL">Delhi</option>
																<option value="AJ">Ajmer</option>
																<option value="JD">Jodhpur</option>
																<option value="MB">Mumbai</option>
															</optgroup>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Tags Support</label>
													<div class="col-sm-10">
														<input type="text" class="form-control input-large" id="e5">														
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Bootstrap Select</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-2"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-2" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form class="form-horizontal" role="form" method="post">
												<div class="form-group">
													<label class="col-sm-2 control-label">Default Select</label>
													<div class="col-sm-3">
														<select class="form-control selectpicker">
															<option>Mustard</option>
															<option>Ketchup</option>
															<option>Relish</option>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Grouped</label>
													<div class="col-sm-4">
														<select class="form-control selectpicker">
															<optgroup label="Picnic">
																<option>Mustard</option>
																<option>Ketchup</option>
																<option>Relish</option>
															</optgroup>
															<optgroup label="Camping">
																<option>Tent</option>
																<option>Flashlight</option>
																<option>Toilet Paper</option>
															</optgroup>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Multiple</label>
													<div class="col-sm-3">
														<select class="form-control selectpicker" data-style="btn-primary" multiple>
															<option>Mustard</option>
															<option>Ketchup</option>
															<option>Relish</option>
														</select>
													</div>
													<div class="col-sm-4">
														<select class="form-control selectpicker" multiple data-selected-text-format="count" data-style="btn-success">
															<option>Mustard</option>
															<option>Ketchup</option>
															<option>Relish</option>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Live Search</label>
													<div class="col-sm-5">
														<select class="form-control selectpicker" data-style="btn-warning" data-live-search="true">
															<option>Mustard</option>
															<option>Ketchup</option>
															<option>Relish</option>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">With Title</label>
													<div class="col-sm-3">
														<select class="form-control selectpicker show-menu-arrow" multiple title='Choose one of the following...' data-style="btn-inverse">
															<option>Mustard</option>
															<option>Ketchup</option>
															<option>Relish</option>
														</select>
													</div>
													<div class="col-sm-3">
														<select class="form-control selectpicker" data-style="btn" disabled>
															<option>Mustard</option>
															<option>Ketchup</option>
															<option>Relish</option>
														</select>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">with Icons</label>
													<div class="col-sm-10">
														<select class="form-control selectpicker" data-style="btn" data-live-search="true" data-width="170px">
															<option data-icon="fa fa-bell-o">Mustard</option>
															<option data-icon="fa fa-home">Ketchup</option>
															<option data-icon="fa fa-heart">Relish</option>
														</select>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Input MaxLength</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-3"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-3" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form class="form-horizontal" role="form" method="post">
												<div class="form-group">
													<label class="col-sm-2 control-label">Default</label>
													<div class="col-sm-4">
														<input type="text" class="form-control" maxlength="25">
														<span class="help-block">The badge will show up by default when the remaining chars are 10 or less. Maximum length is 25</span>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Change the threshold</label>
													<div class="col-sm-5">
														<input type="text" class="form-control maxL-1" maxlength="25">
														<span class="help-block">Do you want the badge to show up when there are 17 chars or less? Use the threshold option. <code>threshold: 17</code></span>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Advance</label>
													<div class="col-sm-8">
														<input type="text" class="form-control maxL-2" maxlength="25">
														<span class="help-block">This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the <code>alwaysShow</code> option is enabled, the <code>threshold</code>option is ignored.</span>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Positions</label>
													<div class="col-sm-5">
														<input type="text" class="form-control" id="maxL-4" maxlength="25">
														<span class="help-block">The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: <code>bottom-right</code>, <code>top-right</code>, <code>top-left</code>, <code>bottom-left</code> and <code>centered-right</code>. All you need to do is specify the <code>placement</code> option, with one of those strings.</span>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label">Textarea</label>
													<div class="col-sm-8">
														<textarea class="form-control" id="maxL-3" maxlength="225" rows="2" placeholder="This textarea has a limit of 225 chars."></textarea>
														<span class="help-block">
															Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
														</span>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Masked Input</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-4"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-4" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form role="form" method="post">
												<div class="row">
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label for="form-field-mask-1">Date <small class="text-success">99/99/9999</small></label>
															<div class="input-group">
																<input class="form-control input-date" id="form-field-mask-1" />													
																<span class="input-group-btn">
																	<button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i>Go!</button>
																</span>
															</div>
														</div>
													</div>
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label for="form-field-mask-2">Phone <small class="text-orange"> (999) 999-9999</small></label>
															<div class="input-group">
																<span class="input-group-addon"><i class="fa fa-phone"></i></span>
																<input class="form-control input-phone" id="form-field-mask-2" />
															</div>
														</div>
													</div>
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label for="form-field-mask-3">Product Key <small class="text-success">a*-999-a999</small></label>
															<div class="input-group">
																<input class="form-control input-key" id="form-field-mask-3" />													
																<span class="input-group-addon"><i class="fa fa-key"></i></span>
															</div>
														</div>
													</div>
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label for="form-field-mask-4">Eye Script <small class="text-primary">99/99/9999</small></label>
																<input class="form-control input-eyescript" id="form-field-mask-4" />
														</div>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>DateTime Picker</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-5"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-5" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form role="form" method="post">
												<div class="row">
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label>DateTime Picking</label>
															<div class="input-group date form_datetime">
																<span class="input-group-addon">
																	<i class="glyphicon glyphicon-time"></i>
																</span>														
																<input class="form-control" />													
															</div>
															<input type="hidden" id="dtp_input1" value="" /><br/>
														</div>
													</div>
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label>Date Picking</label>
															<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
																<span class="input-group-addon">
																	<i class="glyphicon glyphicon-calendar"></i>
																</span>															
																<input class="form-control" />
															</div>
															<input type="hidden" id="dtp_input2" value="" /><br/>
														</div>
													</div>
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label>Time Picking</label>
															<div class="input-group date form_time" data-date="" data-date-format="hh:ii p" data-link-field="dtp_input3" data-link-format="hh:ii p">
																<span class="input-group-addon">
																	<i class="glyphicon glyphicon-time"></i>
																</span>
																<input class="form-control" />													
															</div>
															<input type="hidden" id="dtp_input3" value="" /><br/>
														</div>
													</div>
													<div class="col-lg-3 col-sm-6">
														<div class="form-group">
															<label>Bootstrap Datepicker</label>
															<div class="input-group">
																<span class="input-group-addon">
																	<i class="glyphicon glyphicon-calendar"></i>
																</span>
																<input class="datepicker form-control" value="02/16/12" data-date-format="mm/dd/yy" />													
															</div>
														</div>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>							
							
								<div class="portlet">
									<div class="portlet-heading dark">
										<div class="portlet-title">
											<h4>Html Editors</h4>
										</div>
										<div class="portlet-widgets">
											<a data-toggle="collapse" data-parent="#accordion" href="#ft-6"><i class="fa fa-chevron-down"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="ft-6" class="panel-collapse collapse in">
										<div class="portlet-body">
											<form class="form-horizontal" role="form" method="post">
												<div class="form-group">
													<label class="col-sm-3 control-label">Wysihtml5:</label>
													<div class="col-sm-9">
														<textarea id="editor1" class="form-control"></textarea>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label">Bootstrap MarkDown:</label>
													<div class="col-sm-9">
														<textarea data-provide="markdown" class="form-control" data-iconlibrary="fa"></textarea>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label">Bootstrap Wysiwyg:</label>
													<div class="col-sm-9">
														<div class="wysiwyg-editor" id="editor-2" style="height: 150px;"></div>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
								
								<div class="row">
									<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
										<div class="portlet">
											<div class="portlet-heading dark">
												<div class="portlet-title">
													<h4>jQuery Knob</h4>
												</div>
												<div class="portlet-widgets">
													<a data-toggle="collapse" data-parent="#accordion" href="#ft-7"><i class="fa fa-chevron-down"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="ft-7" class="panel-collapse collapse in">
												<div class="portlet-body">
													<div class="row">
														<div class="col-sm-4 col-xs-6 text-center">
															<input class="knob" data-width="90" data-height="90" data-thickness=".2" data-cursor="true" data-fgColor="#ab7a4b" data-thickness=.3 value="29">
														</div>
														<div class="col-sm-4 col-xs-6 text-center">
															<input class="knob input-small" data-width="90" data-height="90" data-thickness=".2" data-min="-100" data-fgColor="#466baf" data-displayPrevious="true" value="44">
														</div>
														<div class="col-sm-4 text-center">
															<input class="knob input-small" data-width="90" data-height="90" data-thickness=".2" data-angleOffset=-125 data-angleArc=250 data-fgColor="#72af46" data-rotation="anticlockwise" value="35">
														</div>
													</div>
												</div>
											</div>
										</div>
										
										<div class="portlet">
											<div class="portlet-heading dark">
												<div class="portlet-title">
													<h4>Fuelux Spinners</h4>
												</div>
												<div class="portlet-widgets">
													<a data-toggle="collapse" data-parent="#accordion" href="#ft-8"><i class="fa fa-chevron-down"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="ft-8" class="panel-collapse collapse in">
												<div class="portlet-body">
													<form class="form-horizontal" role="form" method="post">
														<div class="form-group">
															<label class="col-sm-3 control-label">Spinner 1</label>
															<div class="col-sm-4">
																<div id="MySpinner-1" class="spinner">
																	<div class="input-group input-small">
																		<input type="text" class="spinner-input form-control">
																		<div class="spinner-buttons input-group-btn btn-group-vertical">
																			<button type="button" class="btn spinner-up btn-xs">
																				<i class="fa fa-chevron-up icon-only"></i>
																			</button>
																			<button type="button" class="btn spinner-down btn-xs">
																				<i class="fa fa-chevron-down icon-only"></i>
																			</button>
																		</div>
																	</div>
																</div>													
															</div>
															<div class="col-sm-4">
																<div id="MySpinner-2" class="spinner">
																	<div class="input-group input-small">
																		<input type="text" class="spinner-input form-control">
																		<div class="spinner-buttons input-group-btn btn-group-vertical">
																			<button type="button" class="btn spinner-up btn-xs btn-gray">
																				<i class="fa fa-chevron-up icon-only"></i>
																			</button>
																			<button type="button" class="btn spinner-down btn-xs btn-gray">
																				<i class="fa fa-chevron-down icon-only"></i>
																			</button>
																		</div>
																	</div>
																</div>
																<span class="help-block">disabled state</span>													
															</div>
														</div>

														<div class="form-group">
															<label class="col-sm-3 control-label">Spinner 3</label>
															<div class="col-sm-4">
																<div id="MySpinner-3" class="spinner">
																	<div class="input-group input-medium">
																		<input type="text" class="spinner-input form-control input-sm">
																		<div class="spinner-buttons input-group-btn">
																			<button type="button" class="btn spinner-up btn-sm">
																				<i class="fa fa-chevron-up icon-only"></i>
																			</button>
																			<button type="button" class="btn spinner-down btn-sm">
																				<i class="fa fa-chevron-down icon-only"></i>
																			</button>
																		</div>
																	</div>
																</div>
																<span class="help-block">with max value:10</span>													
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">Spinner 4</label>
															<div class="col-sm-4">
																<div id="MySpinner-4" class="spinner">
																	<div class="input-group input-medium">
																		<div class="spinner-buttons input-group-btn">
																			<button type="button" class="btn spinner-up">
																				<i class="fa fa-plus icon-only"></i>
																			</button>
																		</div>
															
																		<input type="text" class="spinner-input form-control">
																
																		<div class="spinner-buttons input-group-btn">	
																			<button type="button" class="btn spinner-down">
																				<i class="fa fa-minus icon-only"></i>
																			</button>
																		</div>
																	</div>
																</div>
																<span class="help-block">with step:5</span>													
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
										
									</div>
								
									<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
										<div class="portlet">
											<div class="portlet-heading dark">
												<div class="portlet-title">
													<h4>Touch Spinners</h4>
												</div>
												<div class="portlet-widgets">
													<a data-toggle="collapse" data-parent="#accordion" href="#ft-9"><i class="fa fa-chevron-down"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="ft-9" class="panel-collapse collapse in">
												<div class="portlet-body">
													<form class="form-horizontal" role="form" method="post">
														<div class="form-group">
															<label class="col-sm-3 control-label">Spinner 1</label>
															<div class="col-sm-5">
																<input id="touchspin-demo1" type="text" value="55" name="demo1">												
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">Spinner 2</label>
															<div class="col-sm-5">
																<input id="touchspin-demo2" type="text" value="55" name="demo2">
																<span class="help-block">example with decimal steps</span>
															</div>
														</div>													
													</form>
												</div>
											</div>
										</div>
										
										<div class="portlet">
											<div class="portlet-heading dark">
												<div class="portlet-title">
													<h4>Bootstrap Tags Input</h4>
												</div>
												<div class="portlet-widgets">
													<a data-toggle="collapse" data-parent="#accordion" href="#ft-10"><i class="fa fa-chevron-down"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="ft-10" class="panel-collapse collapse in">
												<div class="portlet-body">
													<form class="form-horizontal" role="form" method="post">
														<div class="form-group">
															<label class="col-sm-3 control-label">Tags</label>
															<div class="col-sm-9">
																<input type="text" class="form-control" value="Amsterdam,Washington,Sydney" data-role="tagsinput" />												
															</div>
														</div>														
													</form>
												</div>
											</div>
										</div>
										<div class="portlet">
											<div class="portlet-heading dark">
												<div class="portlet-title">
													<h4>Color Pickers</h4>
												</div>
												<div class="portlet-widgets">
													<a data-toggle="collapse" data-parent="#accordion" href="#ft-11"><i class="fa fa-chevron-down"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="ft-11" class="panel-collapse collapse in">
												<div class="portlet-body">
													<form class="form-horizontal" role="form" method="post">
														<div class="form-group">
															<label class="col-sm-3 control-label">Color Picker</label>
															<div class="col-sm-9">
																<div class="bootstrap-colorpicker">
																	<input id="colorpicker1" type="text" class="input-small" />
																</div>																
															</div>
														</div>	
														<div class="form-group">
															<label class="col-sm-3 control-label">Custom Color Picker</label>
															<div class="col-sm-9">
																<div class="space-4"></div>
																<select id="ek-colorpicker">
																	<option value="#d15050" selected>#d15050;</option>
																	<option value="#86618f">#86618f</option>
																	<option value="#ba5d32">#ba5d32</option>
																	<option value="#488075">#488075</option>
																	<option value="#4e72c2">#4e72c2</option>
																</select>												
															</div>
														</div>
														
													</form>
												</div>
											</div>
										</div>										
									</div>
								</div>
								<!-- END YOUR CONTENT HERE -->
					
							</div>
						</div>					
					
					<!-- BEGIN FOOTER CONTENT -->		
						<div class="footer">
							<div class="footer-inner">
								<!-- basics/footer -->
								<div class="footer-content">
									&copy; 2014 <a href="#">eKoders</a>, All Rights Reserved.
								</div>
								<!-- /basics/footer -->
							</div>
						</div>
						<button type="button" id="back-to-top" class="btn btn-primary btn-sm back-to-top">
							<i class="fa fa-angle-double-up icon-only bigger-110"></i>
						</button>
					<!-- END FOOTER CONTENT -->
						
				</div><!-- /#page-wrapper -->	  
			<!-- END MAIN PAGE CONTENT -->
		</div>  
	</div> 
	 
    <!-- core JavaScript -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/js/plugins/pace/pace.min.js"></script>
		
	<!-- PAGE LEVEL PLUGINS JS -->
	<script src="assets/js/plugins/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
	<script src="assets/js/plugins/select2/select2.min.js"></script>
	<script src="assets/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<script src="assets/js/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
	<script src="assets/js/plugins/masked-input/jquery.maskedinput.min.js"></script>
	<script src="assets/js/plugins/bootstrap-wysihtml/wysihtml.min.js"></script>
	<script src="assets/js/plugins/bootstrap-wysihtml/bootstrap-wysihtml.js"></script>
	<script src="assets/js/plugins/bootstrap-markdown/markdown.js"></script>
	<script src="assets/js/plugins/bootstrap-markdown/bootstrap-markdown.js"></script>	
	<script src="assets/js/plugins/bootbox/bootbox.min.js"></script>
	<script src="assets/js/plugins/bootstrap-wysiwyg/jquery.hotkeys.js"></script>
	<script src="assets/js/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>
	<script src="assets/js/plugins/bootstrap-wysiwyg/ek-wysiwyg.js"></script>
	<script src="assets/js/plugins/datetime/bootstrap-datetimepicker.min.js"></script>
	<script src="assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
	<script src="assets/js/plugins/fuelux/spinner.min.js"></script>
	<script src="assets/js/plugins/bootstrap-touchspin/bootstrap.touchspin.js"></script>
	<script src="assets/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
	<script src="assets/js/plugins/jquery-knob/jquery.knob.min.js"></script>
	<script src="assets/js/plugins/colorpickers/bootstrap-colorpicker.js"></script>
	<script src="assets/js/plugins/colorpickers/ek-colorpicker.js"></script>

    <!-- Themes Core Scripts -->	
	<script src="assets/js/main.js"></script>
	
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<script src="assets/js/speech-commands.js"></script>
	<script src="assets/js/plugins/gritter/jquery.gritter.min.js"></script>		
	
	<!-- initial page level scripts for examples -->
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.init.js"></script>
	<script>
        $(document).ready(function() { 			
			//Dual listbox examples  for more information and options please visit http://www.virtuosoft.eu/code/bootstrap-duallistbox/
			var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({infoTextFiltered: '<span class="label label-primary label-lg">Filtered</span>'});
			var container1 = demo1.bootstrapDualListbox('getContainer');
				
			//Select2 examples
			$("#e1, #e2, #e3").select2({
				width: 175
			});			
			$("#e4").select2({
				placeholder: "Select a Option",
				width: 375,
				allowClear: true
			});
			$("#e5").select2({tags:["red", "green", "blue"]});
			
			//Bootstrap Select enable
			$('.selectpicker').selectpicker('show');
			
			//Maxilength
			$('input[maxlength]').maxlength();
			
			$('input.maxL-1').maxlength({
				threshold: 17
			});
			
			$('input.maxL-2').maxlength({
				alwaysShow: true,
				warningClass: "label label-primary",
				limitReachedClass: "label label-danger",
				separator: ' of ',
				preText: 'You have ',
				postText: ' chars remaining.',
				validate: true,
				threshold: 10
			});
			
			$('textarea#maxL-3').maxlength({
				alwaysShow: true
			});
			
			$('input#maxL-4').maxlength({
				alwaysShow: true,
				placement: 'top-left'
			});	
					
			//Masked Input Uses http://digitalbush.com/projects/masked-input-plugin/			
			$.mask.definitions['~']='[+-]';
			$('.input-date').mask('99/99/9999');
			$('.input-phone').mask('(999) 999-9999');
			$(".input-key").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
			$('.input-eyescript').mask('~9.99 ~9.99 999');
									
			//Bootstrap Datetimepicker
			$('.form_datetime').datetimepicker({
				//language:  'fr',
				weekStart: 1,
				todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				forceParse: 0,
				showMeridian: 1
			});
			$('.form_date').datetimepicker({
				weekStart: 1,
				todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
			});
			$('.form_time').datetimepicker({
				weekStart: 1,
				todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 1,
				minView: 0,
				maxView: 1,
				forceParse: 0
			});
			
			//Bootstrap Datepicker
			$('.datepicker').datepicker();
			
			//Wysihtml Editor
			$('#editor1').wysihtml5();
			
			//Bootstrap Wysiwyg Editor
			$('#editor-2').ek_wysiwyg({
				toolbar:
					[
						'font',
						null,
						'fontSize',
						null,
						'bold',
						'italic',
						'strikethrough',
						'underline',
						null,
						'justifyleft',
						'justifycenter',
						'justifyright',
						null,
						'createLink',
						'unlink',
						null,
						'insertImage',
						null,
						'undo',
						'redo'
					]
				}).prev().addClass('editor-style1 text-center');

					
			// Spinners
			$('#MySpinner-1').spinner();
			$('#MySpinner-2').spinner({disabled: true});
			$('#MySpinner-3').spinner({value:0, min: 0, max: 10});
			$('#MySpinner-4').spinner({value:0, step: 5, min: 0, max: 200});
			
			// Touchspinners
			$("#touchspin-demo1").TouchSpin({
				min: 0,
				max: 100,
				step: 1,
				decimals: 0,
				boostat: 5,
				maxboostedstep: 10,
				postfix: '$'
			});
			
			 $("#touchspin-demo2").TouchSpin({
				min: 0,
				max: 100,
				step: 0.1,
				decimals: 2,
				boostat: 5,
				maxboostedstep: 10,
				buttonup_class: 'btn btn-primary',
				buttondown_class: 'btn btn-primary',
				postfix: '%'
			});
						
			//jQuery knob for more option/help please visit https://github.com/aterrien/jQuery-Knob
			$(function() {
				$(".knob").knob();
			});
			
			//Color Picker
			$('#colorpicker1').colorpicker();
			
			//Custom Color Picker
			$('#ek-colorpicker').ek_colorpicker();
		});
    </script>
	
  </body>
</html>